<template>
    <el-row :gutter="20">
        <el-col :span="6">
           <ChartCard>
            <!-- 顶部数据 -->
            <template #chart-title>
                今日销售额
            </template>
            <!-- 中间数字的插槽 -->
            <template #chart-number>
               {{chartData.salesToday}}
            </template>
            <!-- 展示图标的地方 -->
            <template #charts>
                <div style="font-size:12px;font-weight:600"><span>日同比:-{{chartData.salesGrowthLastDay}}%</span><svg t="1664441281055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11638" width="32" height="32"><path d="M816.2 501.5c-17.1-12.9-38.5-12.9-51.4 0-12.9 12.8-12.9 34.3 0 51.4 12.8 12.9 34.3 12.9 51.4 0 12.9-17.1 12.9-38.5 0-51.4z" fill="#BBE4FF" p-id="11639"></path><path d="M757.7 560l-0.5-0.5-0.4-0.6c-15.8-21.1-15.4-48.2 0.9-64.5 16.3-16.3 43.5-16.7 64.5-0.9l0.6 0.4 0.5 0.5c16.3 16.3 16.7 43.5 0.9 64.5l-0.9 1.1-1.1 0.9c-10.3 7.7-22.1 11.6-33.3 11.6-11.7 0-22.8-4.2-31.2-12.5z m51.9-50.8c-12.9-9.3-28.6-9.6-37.7-0.5-9.1 9-8.8 24.8 0.5 37.7 9 8.4 24.1 8.2 36.7-0.6 8.7-12.6 9-27.7 0.5-36.6z" fill="#6D5346" p-id="11640"></path><path d="M628.4 325.5c-17.1-12.9-38.5-12.9-51.4 0-12.9 12.8-12.9 34.3 0 51.4 12.8 12.9 34.3 12.9 51.4 0 12.9-17.2 12.9-38.6 0-51.4z" fill="#BBE4FF" p-id="11641"></path><path d="M570 384l-0.5-0.5-0.4-0.6c-15.8-21.1-15.4-48.2 0.9-64.5s43.5-16.7 64.5-0.9l0.6 0.4 0.5 0.5c16.3 16.3 16.7 43.5 0.9 64.5l-0.9 1.1-1.2 0.8c-10.3 7.7-22.1 11.6-33.3 11.6-11.7 0-22.8-4.1-31.1-12.4z m51.8-50.9c-12.9-9.3-28.6-9.6-37.7-0.5-9.1 9-8.8 24.8 0.5 37.7 9 8.4 24.1 8.2 36.7-0.6 8.7-12.6 9-27.7 0.5-36.6z" fill="#6D5346" p-id="11642"></path><path d="M732.7 662.2h96.4v115.7h-96.4z" fill="#FFF061" p-id="11643"></path><path d="M722.7 652.2h116.4v135.7H722.7V652.2z m96.4 20h-76.4v95.7h76.4v-95.7z" fill="#6D5346" p-id="11644"></path><path d="M539.9 469.4h96.4v308.5h-96.4z" fill="#FFF061" p-id="11645"></path><path d="M529.9 787.9V459.4h116.4v328.5H529.9z m96.4-308.5h-76.4v288.5h76.4V479.4z" fill="#6D5346" p-id="11646"></path><path d="M366.4 565.8h96.4v212.1h-96.4z" fill="#FFF061" p-id="11647"></path><path d="M356.4 555.8h116.4v232.1H356.4V555.8z m96.4 20h-76.4v192.1h76.4V575.8z" fill="#6D5346" p-id="11648"></path><path d="M173.6 334.4H270v443.4h-96.4z" fill="#FFF061" p-id="11649"></path><path d="M163.6 324.4H280v463.5H163.6V324.4z m96.4 20h-76.4v423.5H260V344.4z" fill="#6D5346" p-id="11650"></path><path d="M135 767.9h732.6v20H135z" fill="#6D5346" p-id="11651"></path><path d="M430.6 405.1c-17.1-12.9-38.5-12.9-51.4 0-12.9 12.8-12.9 34.3 0 51.4 12.8 12.9 34.3 12.9 51.4 0 12.9-17.1 12.9-38.5 0-51.4z" fill="#BBE4FF" p-id="11652"></path><path d="M372.1 463.6l-0.5-0.5-0.4-0.6c-15.8-21.1-15.4-48.2 0.9-64.5s43.5-16.7 64.5-0.9l0.6 0.4 0.5 0.5c16.3 16.3 16.7 43.5 0.9 64.5l-0.9 1.1-1.1 0.9c-10.3 7.7-22.1 11.6-33.3 11.6-11.7 0-22.8-4.2-31.2-12.5z m51.9-50.8c-12.9-9.3-28.6-9.6-37.7-0.5-9.1 9-8.8 24.8 0.5 37.7 9 8.4 24.1 8.2 36.7-0.6 8.7-12.6 9-27.7 0.5-36.6z" fill="#6D5346" p-id="11653"></path><path d="M237.8 193c-17.1-12.9-38.5-12.9-51.4 0-12.9 12.8-12.9 34.3 0 51.4 12.8 12.9 34.3 12.9 51.4 0 12.9-17.1 12.9-38.5 0-51.4z" fill="#BBE4FF" p-id="11654"></path><path d="M179.3 251.5l-0.5-0.5-0.4-0.6c-15.8-21.1-15.4-48.2 0.9-64.5s43.5-16.7 64.5-0.9l0.6 0.4 0.5 0.5c16.3 16.3 16.7 43.5 0.9 64.5l-0.9 1.1-1.1 0.9c-10.3 7.7-22.1 11.6-33.3 11.6-11.7 0-22.8-4.2-31.2-12.5z m51.9-50.8c-12.9-9.3-28.6-9.6-37.7-0.5-9.1 9-8.8 24.8 0.5 37.7 9 8.4 24.1 8.2 36.7-0.6 8.7-12.6 9-27.7 0.5-36.6z" fill="#6D5346" p-id="11655"></path><path d="M439.023 402.546l115.646-57.823 8.944 17.888-115.646 57.823z" fill="#6D5346" p-id="11656"></path><path d="M744 501.9l16 12z" fill="#6D5346" p-id="11657"></path><path d="M628.68 379.493l15.185-13.016 115.647 134.928-15.186 13.016z" fill="#6D5346" p-id="11658"></path><path d="M235.153 242.253l15.788-12.278 134.935 173.51-15.788 12.278z" fill="#6D5346" p-id="11659"></path></svg> </div>
                <div style="font-size:12px;font-weight:600"><span>月同比:{{chartData.salesGrowthLastMonth}}%</span><svg t="1664441358215" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12900" width="32" height="32"><path d="M186.4 552.9c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.9-12.9 34.3 0 51.4z" fill="#BBE4FF" p-id="12901"></path><path d="M213.7 572.5c-11.2 0-23-3.9-33.3-11.6l-1.1-0.9-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.4 8.3-19.5 12.5-31.2 12.5z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z" fill="#6D5346" p-id="12902"></path><path d="M374.2 376.9c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.8-12.9 34.2 0 51.4z" fill="#BBE4FF" p-id="12903"></path><path d="M401.5 396.4c-11.2 0-23-3.9-33.3-11.6l-1.2-0.8-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.3 8.3-19.4 12.4-31.1 12.4z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z" fill="#6D5346" p-id="12904"></path><path d="M173.5 662.2h96.4v115.7h-96.4z" fill="#FFF061" p-id="12905"></path><path d="M279.9 787.9H163.5V652.2h116.4v135.7z m-96.4-20h76.4v-95.7h-76.4v95.7z" fill="#6D5346" p-id="12906"></path><path d="M366.3 469.4h96.4v308.5h-96.4z" fill="#FFF061" p-id="12907"></path><path d="M472.7 787.9H356.3V459.4h116.4v328.5z m-96.4-20h76.4V479.4h-76.4v288.5z" fill="#6D5346" p-id="12908"></path><path d="M539.8 565.8h96.4v212.1h-96.4z" fill="#FFF061" p-id="12909"></path><path d="M646.2 787.9H529.8V555.8h116.4v232.1z m-96.4-20h76.4V575.8h-76.4v192.1z" fill="#6D5346" p-id="12910"></path><path d="M732.6 334.4H829v443.4h-96.4z" fill="#FFF061" p-id="12911"></path><path d="M839 787.9H722.6V324.4H839v463.5z m-96.4-20H819V344.4h-76.4v423.5z" fill="#6D5346" p-id="12912"></path><path d="M867.6 777.9H135" fill="#BBE4FF" p-id="12913"></path><path d="M135 767.9h732.6v20H135z" fill="#6D5346" p-id="12914"></path><path d="M572 456.5c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.9-12.9 34.3 0 51.4z" fill="#BBE4FF" p-id="12915"></path><path d="M599.3 476.1c-11.2 0-23-3.9-33.3-11.6l-1.1-0.9-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.4 8.3-19.5 12.5-31.2 12.5z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z" fill="#6D5346" p-id="12916"></path><path d="M764.8 244.4c17.1 12.9 38.6 12.9 51.4 0 12.9-17.1 12.9-38.6 0-51.4-12.9-12.9-34.3-12.9-51.4 0-12.9 12.9-12.9 34.3 0 51.4z" fill="#BBE4FF" p-id="12917"></path><path d="M792.1 264c-11.2 0-23-3.9-33.3-11.6l-1.1-0.9-0.9-1.1c-15.8-21-15.4-48.2 0.9-64.5l0.5-0.5 0.6-0.4c21-15.8 48.2-15.4 64.5 0.9 16.3 16.3 16.7 43.4 0.9 64.5l-0.4 0.6-0.5 0.5c-8.4 8.3-19.5 12.5-31.2 12.5z m-20.2-26.7c12.6 8.8 27.7 9 36.7 0.6 9.3-12.9 9.6-28.7 0.5-37.7-9.1-9.1-24.8-8.8-37.7 0.5-8.5 8.9-8.2 24 0.5 36.6z" fill="#6D5346" p-id="12918"></path><path d="M790.5 218.7" fill="#BBE4FF" p-id="12919"></path><path d="M443.4 353.7l115.7 57.8" fill="#BBE4FF" p-id="12920"></path><path d="M439 362.652l8.945-17.888 115.645 57.823-8.944 17.888z" fill="#6D5346" p-id="12921"></path><path d="M250.6 507.9" fill="#BBE4FF" p-id="12922"></path><path d="M242.6 513.9l16-12z" fill="#6D5346" p-id="12923"></path><path d="M250.6 507.9L366.3 373" fill="#BBE4FF" p-id="12924"></path><path d="M243.097 501.455l115.647-134.927 15.186 13.016L258.283 514.47z" fill="#6D5346" p-id="12925"></path><path d="M624.7 409.6l134.9-173.5" fill="#BBE4FF" p-id="12926"></path><path d="M616.78 403.487l134.935-173.51 15.788 12.278-134.935 173.51z" fill="#6D5346" p-id="12927"></path></svg> </div>
            </template>
            <template #chart-footer>
                昨日销售额 $ {{chartData.salesLastDay}}
            </template>
           </ChartCard> 
        </el-col>
        <el-col :span="6">
            <ChartCard>
                <!-- 顶部数据 -->
            <template #chart-title>
                 今日订单
            </template>
            <!-- 中间数字的插槽 -->
            <template #chart-number>
               {{chartData.orderToday}}
            </template>
            <template #charts>
                <line-chart :data="chartData.orderTrend"></line-chart>
            </template>
            <template #chart-footer>
                昨日订单量 $ {{chartData.orderLastDay}}
            </template>
            </ChartCard> 
         </el-col>
         <el-col :span="6">
            <ChartCard>
            <!-- 顶部数据 -->
            <template #chart-title>
                今日交易用户数
           </template>
           <!-- 中间数字的插槽 -->
           <template #chart-number>
              {{chartData.orderUser}}
           </template>
           <template #charts>
               <bar-chart :data="chartData.orderUserTrend"></bar-chart>
           </template>
           <template #chart-footer>
              退货率 {{chartData.returnRate}}%
           </template>
            </ChartCard> 
         </el-col>
         <el-col :span="6">
            <ChartCard>
                  <!-- 顶部数据 -->
            <template #chart-title>
                累计用户数
           </template>
           <!-- 中间数字的插槽 -->
           <template #chart-number>
              {{chartData.usersTotal}}
           </template>
           <template #charts>
               <ProgressChart></ProgressChart>
           </template>
           <template #chart-footer>
             <div>
                <span >日同比:{{chartData.userGrowthLastDay}}%</span><svg t="1664453502843" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2628" width="16" height="16"><path d="M583.93 296.842l234.8 318.515a73.059 73.059 0 0 1-14.99 102.048l-2.62 1.806a78.116 78.116 0 0 1-44.612 13.908h-469.6a75.588 75.588 0 0 1-76.762-74.414 72.878 72.878 0 0 1 14.269-43.348l234.8-318.515a78.568 78.568 0 0 1 106.834-16.888 77.574 77.574 0 0 1 17.881 16.888z" p-id="2629" fill="#1afa29"></path></svg>
                <span style="margin-left:4px ;">月同比:{{chartData.userGrowthLastMonth}}%</span><svg t="1664453536097" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3780" width="16" height="16"><path d="M458.854 701.962l-234.8-318.605a73.059 73.059 0 0 1 15.262-102.048l2.619-1.806a78.026 78.026 0 0 1 44.612-13.817h469.6a75.588 75.588 0 0 1 76.762 74.413 72.246 72.246 0 0 1-14.269 43.258l-234.8 318.605a78.477 78.477 0 0 1-107.195 17.25 77.213 77.213 0 0 1-17.791-17.25z" p-id="3781" fill="#d81e06"></path></svg>
             </div>
           </template>
            </ChartCard> 
         </el-col>
    </el-row>
    
</template>

<script setup lang="ts">
// 引入封装好的卡片组件
import ChartCard from "./ChartCard/index.vue";
import LineChart from "./lineChart/index.vue";
import BarChart from './barChart/index.vue';
import ProgressChart from './progressChart/index.vue'
// 接收父组件传来的数据
defineProps(['chartData'])
</script>

<style scoped>

</style>